<template>
  <!-- 树状列表组件 -->
  <div style="width: 100%; height: 100%; overflow: auto;position: relative;">
    <el-button v-if="treeList.length === 0" type="text" style="position:absolute; top: 0; right: 0;z-index: 99;" @click="gettreelist">刷新</el-button>
    <el-tree
      ref="catetreeone"
      :data="treedata"
      :expand-on-click-node="false"
      node-key="facilityId"
      :default-expanded-keys="treeList"
      accordion
      :highlight-current="true"
      :props="treePropstype"
      :style="treeList.length === 0 ? 'padding-top:20px': ''"
      @node-click="handleSelectionChange"
    />
  </div>
  <!-- show-checkbox default-expand-all-->
</template>
<script>
import nowpagereq from "@/api/basic-info-manage/camera-management/index";
export default {
  data () {
    return {
      treePropstype: {
        children: 'facilityList',
        label: 'facilityName'
      },
      treedata: [],
      facilityGroupList: [],
      facilityList: [],
      treeList: []
    }
  },
  async mounted () {
    await this.gettreelist()
    // setTimeout(() => {
    // this.$nextTick(() => {
    //   if (this.treedata.length > 0) {
    //     // if(this.treedata[0].)
    //     this.handleSelectionChange(this.treedata[0].facilityList[0])
    //   } else {
    //     this.handleSelectionChange(this.treedata[0])
    //   }
    // })
    // console.log(this.treedata[0])

    // }, 1000);
  },
  methods: {
    handleSelectionChange (e) {
      // console.log((e))
      this.$emit("treeselectvalue", e)
    },
    // 获取树状数据
    async gettreelist () {
      const res = await nowpagereq.getshexiangdikaui()
      let data = res.data
      this.facilityGroupList = data.facilityGroupList
      this.facilityList = data.facilityList
      if (this.facilityGroupList.length > 0) {
        this.treeList = [this.facilityGroupList[0].facilityGroupId]
      } else {
        this.treeList = [this.facilityList[0].facilityId]
      }
      this.changetreedata()
    },
    // 处理树状数据
    changetreedata () {
      let nothasgroup = []
      if (this.facilityList.length > 0) {
        nothasgroup = [{
          facilityName: "未分组地块",
          facilityId: this.facilityList[0].facilityId,
          facilityList: this.facilityList
        }]
      } else {
        nothasgroup = [{
          facilityName: "未分组地块",
          facilityList: this.facilityList
        }]
      }
      let hasgrouplist = this.facilityGroupList.filter(
        item => {
          // item.facilityName = item.facilityGroupName
          // item.facilityId = item.facilityGroupId
          this.$set(item, 'facilityName', item.facilityGroupName)
          this.$set(item, 'facilityId', item.facilityGroupId)
          // console.log(item)
          let groupitem = {
            ...item
          }
          return groupitem
        }
      )
      this.treedata = [
        ...hasgrouplist,
        ...nothasgroup
      ]

      this.$nextTick(() => {
        if (this.treedata.length > 0) {
        // if(this.treedata[0].)
          this.handleSelectionChange(this.treedata[0].facilityList[0])
        } else {
          this.handleSelectionChange(this.treedata[0])
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tree {
  overflow-y: unset;
  padding-right:8px ;
}
</style>
